---
title: 'Online Version'
permalink: "/online.html"
layout: base-layout
stylesheets: [
  "/css/layout-online.css",
  "/css/content.css",
  "/vendor/codemirror/codemirror.css",
  "/vendor/codemirror/lint.css"
]
scripts: [
  "/vendor/jquery.min.js",
  "/vendor/FileSaver.min.js",
  "/vendor/inspect.js",
  "/vendor/peggy/peggy.min.js",
  "/vendor/codemirror/codemirror.js",
  "/vendor/codemirror/lint.js",
  "/js/online.js"
]
---

{% include 'components/header.html' %}

<div id="loader">
  <div id="loader-inner">Loading...</div>
</div>

<div id="content">
<table id="columns">
  <tr>
    <td>
      <table class="column online" id="left-column">
        <tr>
          <td class="content-height">
            <h2 class="suggestion top">
              <span class="step-number">1</span>
              <div class="step-title">Write your Peggy grammar</div>
            </h2>
          </td>
        </tr>
        <tr>
          <td>
            <div class="textarea-wrapper">
              <textarea class="code" id="grammar" autocomplete="off" autocorrect="off" autocapitalize="off"
                spellcheck="false" disabled>// Simple Arithmetics Grammar
// ==========================
//
// Accepts expressions like "2 * (3 + 4)" and computes their value.

Expression
  = head:Term tail:(_ ("+" / "-") _ Term)* {
      return tail.reduce(function(result, element) {
        if (element[1] === "+") { return result + element[3]; }
        if (element[1] === "-") { return result - element[3]; }
      }, head);
    }

Term
  = head:Factor tail:(_ ("*" / "/") _ Factor)* {
      return tail.reduce(function(result, element) {
        if (element[1] === "*") { return result * element[3]; }
        if (element[1] === "/") { return result / element[3]; }
      }, head);
    }

Factor
  = "(" _ expr:Expression _ ")" { return expr; }
  / Integer

Integer "integer"
  = _ [0-9]+ { return parseInt(text(), 10); }

_ "whitespace"
  = [ \t\n\r]*</textarea>
            </div>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <div id="build-message" class="message progress">Loading...</div>
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table class="column" id="right-column">
        <tr>
          <td class="content-height">
            <h2 class="suggestion top">
              <span class="step-number">2</span>
              <div class="step-title">Test the generated parser with some input</div>
            </h2>
          </td>
        </tr>
        <tr>
          <td>
            <div class="textarea-wrapper">
              <textarea class="code" id="input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                disabled>2 * (3 + 4)</textarea>
            </div>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <div id="parse-message" class="message disabled">Parser not available.</div>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <h2 id="output-header">Output</h2>
            <pre id="output" class="disabled">Output not available.</pre>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <h2 class="suggestion">
              <span class="step-number">3</span>
              <div class="step-title">Download the parser code</div>
            </h2>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <div id="settings">
              <label for="parser-var">Parser variable for UMD or Global:</label>
              <input type="text" id="parser-var" value="Peggy" placeholder="module.exports" disabled>
              <div id="options">
                <input type="checkbox" id="option-cache" disabled>
                <label for="option-cache">Use results cache</label>
              </div>
            </div>
            <div id="download-container">
              <div>Download parser:</div>
              <input type="submit" id="parser-download-globals" class="download-button" value="Globals" disabled>
              <input type="submit" id="parser-download-umd" class="download-button" value="UMD" disabled>
              <input type="submit" id="parser-download-cjs" class="download-button" value="CommonJS" disabled>
              <input type="submit" id="parser-download-es6" class="download-button" value="ES6" disabled>
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
